<template lang="pug">
  div
    el-row(:gutter="10")
      el-col(:lg="8")
        el-row(:gutter="10")
          el-col(:lg="8")
            .item-title 用户名：
          el-col(:lg="16")
            .item-value {{ userInfo.name}}
        el-row(:gutter="10")
          el-col(:lg="8")
            .item-title 电子邮件：
          el-col(:lg="16")
            .item-value {{ userInfo.email}}
        el-row(:gutter="10")
          el-col(:lg="8")
            .item-title 建立时间：
          el-col(:lg="16")
            .item-value {{ userInfo.created_at}}
        el-row(:gutter="10")
          el-col(:lg="8")
            .item-title 最后更新时间：
          el-col(:lg="16")
            .item-value {{ userInfo.updated_at}}
      el-col(:lg="8")
        el-upload(class="avatar-uploader" action="/api/user_avatar" :show-file-list="false" :headers="headers" :on-success="onUploadSuccess")
          img(v-if="userInfo.avatar_url" :src="userInfo.avatar_url" class="avatar" )
          i(class="el-icon-plus avatar-uploader-icon")
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { IUserType, UserModule } from "../../store/modules/user";
import { user_info } from "../../services";

UserModule;

@Component
export default class UserInfo extends Vue {
  private userInfo: IUserType = {};
  private headers: any = {};

  mounted() {
    if (UserModule.user && UserModule.user.id) {
      if (UserModule.user) {
        this.userInfo = UserModule.user;
      }
      if (UserModule.token) {
        this.headers["Authorization"] = `${UserModule.token.token_type} ${
          UserModule.token.access_token
        }`;
      }
    }
  }

  onUploadSuccess(response: any, file: any, fileList: any) {
    let { success, data } = response;
    if (success) {
      this.userInfo["avatar_url"] = data.url;
      UserModule.SAVE_USER(this.userInfo)
      this.$forceUpdate();
    }
  }
}
</script>
<style lang="scss" scoped>
.item-title,
.item-value {
  text-align: right;
  line-height: 3rem;
}
.item-value {
  text-align: left;
}

.avatar-uploader {
  width: 12rem;
  height: 12rem;
  position: relative;
  overflow: hidden;
}

.avatar {
  border-radius: 50%;
  display: block;
  height: 12rem;
  overflow: hidden;
  width: 12rem;
}

.avatar-uploader .el-upload {
  border: 4px dashed #d9d9d9;
  cursor: pointer;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 12rem;
  height: 12rem;
  line-height: 12rem;
  text-align: center;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
}
</style>

